<template>
	<view class=" page_body">
		<!-- 状态栏高度 设置背景色 占位状态栏-->
		<view class="ztl"
			:style="{'height':statusBarHeight}"></view>
		<!-- 占位盒子 -->
		<view class=""
			:style="{'height': hieght}"></view>
		<!-- 导航栏 -->
		<navBar bgColor="#FFF">
			<image :slot="'left'"
				@click="navToBack"
				:src="xcxImgUrl && xcxImgUrl+'fanhui.svg'"
				style="width: 36rpx;height: 36rpx;"></image>
			<text :slot="'content'">设置</text>
		</navBar>

		<scroll-view class="main_setting"
			scroll-y
			:style="{'height': 'calc(100vh - ' + demoTopHieght +')'}">
			<!-- 选择项 -->
			<u-cell-group class="group mb10">
				<u-cell isLink
					@click="choosePicture">
					<view slot="title"
						class="u-slot-title">
						<text class="u-cell-text">头像</text>
					</view>
					<view slot="value"
						class="u-slot-value">
						<image
							:src="visitorLoginInfo && visitorLoginInfo.headUrl ? visitorLoginInfo.headUrl : xcxImgUrl && xcxImgUrl+'myde/touxiang.svg'"
							style="width: 100rpx;height: 100rpx;border-radius: 50%;"></image>
					</view>
				</u-cell>
				<u-cell isLink
					@click="updateUserName">
					<view slot="title"
						class="u-slot-title">
						<text class="u-cell-text ">用户名</text>
					</view>
					<view slot="value"
						class="u-slot-value textOneShow">
						<text>{{visitorLoginInfo && 
						 visitorLoginInfo.name ?
						 visitorLoginInfo.name : '去设置'}}</text>
					</view>
				</u-cell>
				<u-cell isLink
					@click="updatePhoneNumber('phoneNumber')">
					<view slot="title"
						class="u-slot-title">
						<text class="u-cell-text ">手机号码</text>
					</view>
					<view slot="value"
						class="u-slot-value textOneShow">
						<text>{{visitorLoginInfo && 
						 visitorLoginInfo.phone ?
						 visitorLoginInfo.phone : '去设置'}}</text>
					</view>
				</u-cell>
			</u-cell-group>

			<!-- 选择项 -->
			<u-cell-group class="group mb10">
				<u-cell isLink
					@click="invitationCode">
					<view slot="title"
						class="u-slot-title">
						<text class="u-cell-text">我的邀请码</text>
					</view>
					<view slot="value"
						class="u-slot-value">
						<image :src="xcxImgUrl && xcxImgUrl+'page_setting/static/yaoqingma.png'"
							style="width: 36rpx;height: 36rpx;"></image>
					</view>
				</u-cell>
				<u-cell isLink
					@click="harvestAddress">
					<view slot="title"
						class="u-slot-title">
						<text class="u-cell-text ">我的收货地址</text>
					</view>
					<view slot="value"
						class="u-slot-value textOneShow">
						<text>{{address ? address : '暂无收货地址'}}</text>
					</view>
				</u-cell>
			</u-cell-group>

			<!-- 选择项 -->
			<u-cell-group class="group mb10">
				<u-cell v-if="visitorLoginInfo && visitorLoginInfo.phone"
					isLink
					@click="updatePhoneNumber('password')">
					<view slot="title"
						class="u-slot-title">
						<text class="u-cell-text">修改密码</text>
					</view>
				</u-cell>
				<u-cell isLink
					@click="toAboutUs">
					<view slot="title"
						class="u-slot-title">
						<text class="u-cell-text ">关于产品</text>
					</view>
				</u-cell>
			</u-cell-group>

			<!-- 退出 -->
			<view @click="outLogin"
				style="margin-top: 110rpx;">
				<newBtn name="退出账号"></newBtn>
			</view>

		</scroll-view>

		<!-- 选择头像 -->
		<u-popup mode="bottom"
			:round="20"
			:show="choosePictureShow"
			@close="choosePictureShow = false">
			<view class="Picture">
				<view class="Picture_title">
					更换头像
				</view>
				<view class="Picture_cont">
					<view @click="updTouxiang(1)"
						class="Picture_cont_item">
						<image :src="xcxImgUrl && xcxImgUrl+'page_setting/static/paizhao.svg'"></image>
						<text>拍照</text>
					</view>
					<view @click="updTouxiang(2)"
						class="Picture_cont_item">
						<image :src="xcxImgUrl && xcxImgUrl+'page_setting/static/xiangce.svg'"></image>
						<text>相册</text>
					</view>
				</view>
				<view class="Picture_btn"
					@click="choosePictureShow = false">
					取消
				</view>
			</view>
		</u-popup>

		<!-- 邀请码 -->
		<u-popup mode="bottom"
		@touchmove.stop.prevent
			:round="20"
			:show="invitationCodeShow"
			@close="invitationCodeShow = false"
			:closeable="true">
			<view class="invitationCode">
				<invitationCode></invitationCode>
			</view>
		</u-popup>

		<!-- 绑定手机号 -->
		<bindingPhoneNumber :bindingPhoneNumberShow='bindingPhoneNumberShow'
			@close='bindingPhoneNumberlose'
			@save='bindingPhoneNumberSave'
			v-if="bindingPhoneNumberShow"></bindingPhoneNumber>

		<!-- 图片裁剪 -->
		<gmyImg v-if='gmyImgShow'
			ref="gmyImgCropper"
			:quality="1"
			cropperType="fixed"
			:imgSrc="imgSrc"
			@getImg="getImg"></gmyImg>

		<!-- 模态框确认 -->
		<u-modal :show="modalShow"
			:title="modalInfo.title"
			showConfirmButton
			showCancelButton
			@confirm='modalConfirm'
			@cancel='modalShow = false'
			:content='modalInfo.content'>

		</u-modal>

	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import newBtn from '@/components/newBtn/newBtn.vue'
	import invitationCode from '@/components/invitationCode/invitationCode.vue'
	import bindingPhoneNumber from '@/components/bindingPhoneNumber/bindingPhoneNumber.vue'
	import gmyImg from "./components/img-caijian/uni-img-cropper.vue"
	import {
		getDefaultMallCustomerAddress,
		updateMallMemberInfo,
		logout
	} from '@/api/setting.js'
	import {
		getCurrentMallMember
	} from '@/api/global.js'
	import {
		uploadImgUrl
	} from '@/utils/request.js'
	export default {
		computed: {
			...mapGetters(['demoTopHieght']),
		},
		components: {
			newBtn,
			invitationCode,
			bindingPhoneNumber,
			gmyImg
		},
		data() {
			return {
				statusBarHeight: '',
				hieght: '',
				choosePictureShow: false, //选择头像弹出控制
				invitationCodeShow: false, //邀请码弹出控制值
				visitorLoginInfo: {}, //本地信息
				address: '', //收货地址信息
				bindingPhoneNumberShow: false, //绑定手机号弹出
				imgSrc: "", //选择的本地图片地址
				gmyImgShow: false, //控制裁剪的显示隐藏
				modalShow: false, //模态框
				modalInfo: { //模态框提示对象内容
					title: '温馨提示',
					content: ''
				}
			};
		},
		onShow() {
			this.$nextTick(() => {
				// 获取状态栏的高度
				this.statusBarHeight = this.$store.state.statusBarHeight * 2 + 'rpx'
				// 计算站位的高度
				this.hieght = (this.$store.state.navBarHeight) * 2 + 'rpx'
				//获取高度
				this.Utils.getDemoTopHeight('main_setting')

				//获取本地信息 回显
				this.getUserInfo()
				//获取收货地址 回显
				this.getAddress()
			})
		},
		methods: {
			//模态框提示确认
			async modalConfirm() {
				let resr = await logout()
				if (resr.code == 2000) {
					this.modalShow = false
					this.Utils.toast('退出成功')
					uni.removeStorageSync('visitorLoginInfo')
					uni.removeStorageSync('visitorAccessToken');

					// uni.clearStorage();
					// uni.removeStorageSync('wxOpenId');
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/login/login?type=outLogin'
						})
					}, 500)
				} else {
					console.log(999)
					this.Utils.toast(`${resr.msg}`)
				}
			},
			//退出账号
			outLogin() {
				this.modalShow = true
				this.modalInfo.content = '是否要退出登录？'
			},
			//获取用户信息
			async getUserInfo() {
				let res = await getCurrentMallMember()
				if (res.code == 2000) {
					this.visitorLoginInfo = res.data.info
					console.log(res);
				}
			},
			//获取收货地址
			async getAddress() {
				let resr = await getDefaultMallCustomerAddress()
				if (resr.code == 2000) {
					this.address = resr?.data?.info?.province + resr?.data?.info?.city + resr?.data?.info?.area + resr
						?.data?.info?.address
					console.log(resr);
				}
			},
			// 点击弹出选择头像框
			choosePicture() {
				this.choosePictureShow = true
			},
			// 裁剪完成时,返回截取图片的临时路径
			async getImg(e) {
				console.log(e, '图片')
				// //上传服务器
				let xianUrl = await this.Utils.uploadFilePromise(e)
				if (xianUrl.code == 2000) {
					uni.showLoading()
					//调接口保存
					let resr = await updateMallMemberInfo({
						name: '',
						phone: '',
						password: '',
						headUrl: uploadImgUrl + xianUrl.data.info[0].url
					})
					if (resr.code == 2000) {
						uni.hideLoading()
						this.Utils.toast('修改成功')
						let loginInfo = JSON.parse(uni.getStorageSync('visitorLoginInfo'))
						console.log(loginInfo.MallMember.headUrl, uploadImgUrl + xianUrl.data.info[0].url)
						loginInfo.MallMember.headUrl = uploadImgUrl + xianUrl.data.info[0].url
						uni.setStorageSync('visitorLoginInfo', JSON.stringify(loginInfo))
						this.getUserInfo()
						this.choosePictureShow = false
						this.gmyImgShow = false
					} else {
						this.Utils.toast(`${resr.msg}`)
						return
					}
				} else {
					this.Utils.toast(`${xianUrl.msg}`)
					return
				}

			},
			/**
			 * 点击拍照 和相册
			 * @param {Object} type 1.相机 2.相册
			 */
			async updTouxiang(type) {
				//获取本地照片
				let ImgUrl = await this.Utils.takeAPhoto(type == 1 ? ['camera'] : ['album'])
				//隐藏选择头像弹窗
				this.choosePictureShow = false
				//唤起裁剪
				this.imgSrc = ImgUrl.tempFilePaths[0]
				this.gmyImgShow = true

				// //上传服务器
				// let xianUrl = await this.Utils.uploadFilePromise(ImgUrl.tempFilePaths[0])
				// if(xianUrl.code == 2000){
				// 	uni.showLoading()
				// 	//调接口保存
				// 	let resr = await updateMallMemberInfo({
				// 		name:'',
				// 		phone:'',
				// 		password:'',
				// 		headUrl:uploadImgUrl + xianUrl.data.info[0].url
				// 	})
				// 	if(resr.code == 2000){
				// 		uni.hideLoading()
				// 		this.Utils.toast('修改成功')
				// 		this.getUserInfo()
				// 		this.choosePictureShow = false
				// 	}else{
				// 	this.Utils.toast(`${resr.msg}`)
				// 	return
				// }
				// }else{
				// 	this.Utils.toast(`${xianUrl.msg}`)
				// 	return
				// }
			},
			//点击跳转修改用户名
			updateUserName() {
				uni.navigateTo({
					url: '/page_setting/updateUserName'
				})
			},
			//点击跳转修改手机号码和修改密码页面
			updatePhoneNumber(value) {
				//先判断是否有手机号码
				if (!this.visitorLoginInfo.phone) {
					//如果是微信小程序 先授权

					//如果是app h5 弹出绑定手机号弹出层
					this.bindingPhoneNumberShow = true
					return
				}

				uni.navigateTo({
					url: `/page_setting/updatePhoneNumber?type=${value}&phone=${JSON.stringify(this.visitorLoginInfo.phone)}`
				})
			},
			//关闭绑定手机号弹出
			bindingPhoneNumberlose() {
				this.bindingPhoneNumberShow = false
			},
			//手机号弹窗框确认
			bindingPhoneNumberSave() {
				//关闭弹窗
				this.bindingPhoneNumberShow = false
				//调用获取设置信息
				this.getUserInfo()
			},
			//点击跳转关于产品
			toAboutUs() {
				uni.navigateTo({
					url: '/page_setting/aboutUs'
				})
			},
			//点击弹出邀请码
			invitationCode() {
				this.invitationCodeShow = true
			},
			//点击去收获地址
			harvestAddress() {
				uni.navigateTo({
					url: '/page_setting/harvestAddress?type=settingHome'
				})
			},
			//返回上一级
			navToBack() {
				uni.switchTab({
					url: '/pages/myde/myde'
				})
			},

		}
	}
</script>

<style lang="scss"
	scoped>
	/deep/ .u-popup__content__close {
		top: 22rpx;
		height: 36rpx;
		width: 36rpx;
		line-height: 80rpx;
		border: rgb(144, 147, 153) 1px solid;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/deep/.u-modal__button-group__wrapper--confirm.u-modal__button-group__wrapper--confirm {
		background-color: #ec4141;

		.u-modal__button-group__wrapper__text {
			color: #FFF !important;
		}
	}

	.ztl {
		width: 100%;
		// height: var(--status-bar-height);
		background-color: #fff;
	}

	/deep/.u-cell__body {
		padding: 30rpx !important;
	}

	.main_setting {
		width: 100%;
		box-sizing: border-box;

		.group {
			background-color: #FFF;

			.u-cell-text {
				font-size: $font_size_14;
				color: $text_color_333;
			}

			.u-slot-value {
				width: 60%;
				text-align: right;
				font-size: $font_size_14;
				color: $text_color_808080;
			}
		}
	}



	.Picture {
		width: 100%;
		height: 560rpx;
		background-color: $bg_color;
		border-radius: 38rpx 38rpx 0 0;

		.Picture_title {
			width: 100%;
			height: 100rpx;
			font-size: 32rpx;
			color: $text_color_333;
			line-height: 100rpx;
			text-align: center;
			font-weight: bold;
			border-bottom: 1px solid #E6E6E6;
		}

		.Picture_cont {
			width: 100%;
			height: calc(560rpx - 100rpx - 92rpx);
			box-sizing: border-box;
			display: flex;
			align-items: center;

			.Picture_cont_item {
				width: 120rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				color: $text_color_808080;
				font-size: $font_size_12;
				margin-left: 40rpx;

				image {
					width: 120rpx;
					height: 120rpx;
					border-radius: $border_radius_10;
					margin-bottom: 10rpx;
				}
			}
		}

		.Picture_btn {
			width: 100%;
			height: 92rpx;
			font-size: 32rpx;
			color: $text_color_333;
			line-height: 92rpx;
			text-align: center;
			background-color: #FFF;
			position: fixed;
			bottom: 0;
		}
	}

	.invitationCode {
		width: 100%;
		height: calc(100vh - 30vh);
		border-radius: 38rpx 38rpx 0 0;
	}

	/deep/.u-cell-group {
		background-color: #FFF;
		margin-bottom: 20rpx;
	}

	/deep/.u-slot-value {
		width: 60%;
		text-align: right;
		font-size: $font_size_14;
		color: $text_color_808080;
	}
</style>